<!-- Dom模板 -->
<template>
  <div>
    <div>
      <div class="actions">秒杀活动</div>
      <div class="con">
        <div class="top">
          <p>秒杀活动列表</p>
          <button
            style="
              padding: 10px 30px;
              border: none;
              background: #38a28a;
              color: white;
              border-radius: 5px;
            "
            @click="addAction"
          >
            添加活动
          </button>
        </div>
        <el-table
          :data="
            miaoData.slice(
              (Number(pageNum) - 1) * Number(pageSize),
              Number(pageNum) * Number(pageSize)
            )
          "
          width="100%"
          max-height="350"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="活动编号" width="120px">
          </el-table-column>
          <el-table-column prop="title" label="活动标题" width="160px">
          </el-table-column>
          <el-table-column prop="img" label="活动封面" width="120px">
            <template slot-scope="scope">
              <img :src="scope.row.img" alt="" width="80px" height="40px" />
            </template>
          </el-table-column>
          <el-table-column prop="type" label="活动状态" width="120px">
            <template slot-scope="scope">
              <span>{{ scope.row.type == 1 ? "进行中" : "已下线" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="startTime" label="开始时间" width="170px">
          </el-table-column>
          <el-table-column prop="endTime" label="结束时间" width="170px">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            width="230px"
            textAlign="center"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                style="color: #38a28a"
                @click="courseShow"
                >课程设置</el-button
              >
              <el-button
                type="text"
                size="small"
                style="color: black"
                @click="editMiao(scope.row.id)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                style="color: red"
                @click="delMiao(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="all">
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[3, 5, 10, 20]"
              :page-size="3"
              layout="total, sizes, prev, pager, next, jumper"
              :total="miaoData.length"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <add-pop
      v-if="pop.addShow"
      :addPopaction="addPopaction"
      :closePop="closePop"
      :allData="miaoData.length != 0 ? miaoData : ''"
    ></add-pop>
    <course-pop
      v-if="pop.courseShow"
      :closePop="closePop"
      :allData="miaoData.length != 0 ? miaoData : ''"
    ></course-pop>
    <edit-pop
      v-if="pop.editShow"
      :getEditData="getEditData"
      :closePop="closePop"
      :editData="editData != '' ? editData : ''"
    ></edit-pop>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import editPop from "@/components/glPop/miaoEdit.vue";
import AddPop from "@/components/glPop/addPop.vue";
import coursePop from "@/components/glPop/setClass.vue";
export default {
  components: { editPop, AddPop, coursePop },
  name: "",
  data() {
    return {
      popType: "",
      checked: true,
      coursePop: false,
      miaoData: [],
      pageSize: 3,
      pageNum: 1,
      editData: "",
      pop: {
        editShow: false,
        courseShow: false,
        addShow: false,
      },
    };
  },
  computed: {
    changeAll: {
      get() {},
      set() {},
    },
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getData();
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    async getData() {
      let res = await this.$axios.get("/api/miao/data");
      this.miaoData = res.data.filter((item) => {
        return item.promote == 0;
      });
    },
    closePop() {
      //关闭弹框
      this.pop.editShow = false;
      this.pop.courseShow = false;
      this.pop.addShow = false;
    },
    courseShow() {
      // 课程列表
      console.log("课程列表");
      this.pop.courseShow = true;
    },

    changeChecked(val) {
      //每一条数据的是否选中状态
      console.log(val, "要改变选中框");
      this.$axios.post("/api/miao/changechecked", {
        id: val,
      });
      this.getData();
    },
    addAction() {
      console.log(111);
      // 添加秒杀活动
      this.pop.addShow = true;
    },
    addPopaction(val) {
      let res = this.$axios.post("/api/miao/adddata", {
        obj: val,
      });
      this.getData();
    },
    handleSizeChange(val) {
      //每页多少条
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      //当前第几页
      this.pageNum = val;
    },
    delMiao(i) {
      // 删除数据
      let res = this.$axios.post("/api/miao/deldata", {
        id: i,
      });
      this.getData();
    },
    editMiao(i) {
      this.pop.editShow = true;
      // 编辑数据
      this.editData = this.miaoData.find((item) => {
        return item.id == i;
      });
    },
    getEditData(data) {
      // 获取编辑后的数据
      let res = this.$axios.post("/api/miao/editdata", {
        obj: data,
      });
      this.getData();
    },
    batchDel() {
      // 批量删除
    },
  },
};
</script>

<style scoped >
/* @import url(''); 引入css类 */
.actions {
  width: 100%;
  height: 20px;
  padding: 20px 40px;
  font-weight: bold;
}
.con {
  box-sizing: border-box;
  width: 92%;
  margin-left: 4%;
  height: 550px;
  /* margin-top: 2%; */
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.top {
  height: 60px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.top p {
  font-weight: bold;
}
.all {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  text-align: right;
  padding: 0 10px;
  margin-bottom: 10px;
}
.el-pager li.active {
  color: #38a28a;
  cursor: default;
}
</style>